<template>
	<div class="headimgSinger">
		<div class="Singer">
			热门歌手
		</div>
		<div class="singerList">
			<ul>
				<li @click="songerM3(index)" v-for="item,index in imgList">
					<ImgList :src="item.avatar_middle"></ImgList>
					<p>{{item.name}}</p>
				</li>
			</ul>
			
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import ImgList from "./img";
	export default {
		name:"headimgSinger",
		data(){
			return{
			}
		},
		components:{
			ImgList,
		},
		methods:{ 
			songerM3(index){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.MusicSinger.artist[index].ting_uid);
			}
		},
		computed:{
			imgList(){
				return this.MusicSinger.artist;	
			}
		},
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.MusicSinger){//判断之前是否已经存储了MusicSinger信息
                var tem = JSON.parse(sessionStorage.MusicSinger);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.MusicSinger = tem.data;
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.get72HotArtist&format=jsonℴ=1&offset=0&limit=51",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.MusicSinger = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.MusicSinger = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.MusicSinger = res;
                }
            })
        }
	}
</script>

<style scoped lang="scss">
.headimgSinger{
	width: 95%;
	margin: 0 auto;
	.Singer{
		margin: 3% 0;
		color: #ddd;
	}
	&>.singerList{
		width: 100%;
		height: 20%;
		ul{
			li{
				text-align: center;
				width: 32.33%;
				height:100%;
				display: inline-block;
				margin-top: 4%;
				margin-right: 1%;
				div{
					width: 100%;
					height:80%;
					img{
						width: 100%;
					}
				}
			}
		}
			
	}
}
</style>
